<template>
  <div id="comment">
    <div v-if="loading">
      <div class="penson flex-middle" style="margin-top: 0.15rem">
        <div class="headimg" style="width:1.1rem; height: 1.1rem;"><img :src="user.face? user.face: '../../static/img/noheadpic.png'" /></div>
        <div class="flex-auto">
          <p class="flex flex-middle">
            <span class="overflowtext" style="font-size: 0.3rem;">{{ user.nick_name }}</span>
            <i class="icon icon-gerenrenzheng"></i>
            <i class="icon icon-qiye"></i>
            <i class="icon icon-xiaoche" v-if="user.car != 0"></i>
          </p>
          <div class="flex flex-middle">
            <rater  v-model="user.comment_score " disabled active-color="#ff9800"></rater>
            <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">
                {{ user.comment_score }}<span style="font-size: 0.24rem;">分</span>
                <span class="text-gray">{{ user.order_pai }}<span style="font-size: 0.24rem;">单</span></span>
              </span>
          </div>
          <p class="flex text-gray" style="line-height: 0.34rem;"><small>{{ user.carname }}</small></p>
        </div>
      </div>


      <div class="comment">
        <p class="title">五星好评可以给对方信用值加分哦！</p>
        <div>
          <rater
            v-model="type"
            active-color="#ffd72e"
            :font-size="5"
            star="<i class='icon icon-star1' style='font-size: 0.5rem'></i>">
          </rater>
          <p class="rater-title"><b>{{ title }}</b></p>
        </div>
        <checker
          v-model="formItem.chatid"
          type="radio"
          default-item-class="check-item"
          selected-item-class="check-item-selected">
          <checker-item v-for="(item, index) in tag" :key="index" :value="item.id">
            <span>{{ item.name }}</span>
            <i class="icon icon-checked"></i>
          </checker-item>
        </checker>
        <div style="clear: both"></div>
        <div style="margin-top: 0.3rem;">
          <x-button type="primary" :show-loading="loadingBtn" @click.native="subComment" action-type="button">{{btn}}</x-button>
        </div>
        <div class="ts">
          <router-link :to="{name: 'complaint', query: {oid: formItem.oid, touid: formItem.touid, serviceid: formItem.serviceid}}"><img src="../../static/img/ts.png" /></router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Rater } from 'vux'
export default {
  components: {
    PubHeader,
    Rater
  },
  created() {
    const {oid, serviceid} = this.$route.query
    if(!oid || !serviceid) {
      this.$router.push('/')
      return
    }
    this.$http.post($config.host + '/api/Comment/commentDesc', qs.stringify({
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token,
      oid,
      serviceid,
      uid: this.$store.state.userInfo.uid
    })).then(res => {
      const {code, data, msg} = res.data
      if(code == 1 && data) {
        this.loading = true
        this.user = data.user
        this.desc = data.desc
        this.title = data.desc[this.type - 1].title
        this.tag = data.desc[this.type - 1].desc

        this.formItem.touid = data.user.id
      } else if (code == '3') {
        this.$vux.toast.text($config.loginErrMsg, 'middle')
        this.$router.push({path: '/logout'})
      } else {
        this.$vux.toast.text(msg, 'middle')
      }
    }).catch(err => {
      this.$vux.toast.text($config.errMsg, 'middle')
    })
  },
  watch: {
    type: function (val) {
      const index = val - 1
      this.title = this.desc[index].title
      this.tag = this.desc[index].desc
      this.formItem.type = val
      this.formItem.chat = ''
      this.formItem.chatid = ''
    }
  },
  data() {
    return {
      btn: '评价',
      rater: 4,
      loading: false,
      loadingBtn: false,
      user: {},
      desc: [],
      type: 5,
      title: '',
      formItem: {
        uid: this.$store.state.userInfo.uid,
        chat: '',
        chatid: '',
        type: 5,
        touid: '',
        service_id: this.$route.query.serviceid,
        oid: this.$route.query.oid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      },
      tag: [],
    }
  },
  methods: {
    subComment() {
      if(!this.formItem.chatid){
        this.$vux.toast.text('请选择评论标签', 'middle')
        return
      }
      if(this.formItem.type == 1){
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '亲，服务差，可以加入您的黑名单，以后他收不到您的订单！',
          confirmText: '直接拉黑',
          cancelText: '给个机会',
          onConfirm: () => {
            this.sub()
          }
        })
        return
      }
      this.sub()
    },
    sub() {
      this.loadingBtn = true
      this.btn = '提交评价中'
      const {type, chatid} = this.formItem
      const checkCommentArr = this.desc[type - 1].desc.find(pet => pet.id == chatid)
      this.formItem.chat = checkCommentArr.name
      this.$http.post($config.host + '/api/Comment/orderComment', qs.stringify(this.formItem)).then(res => {
        const {code, msg} = res.data
        if(code == 1) {
          this.$vux.toast.text('评论成功', 'middle')
          this.$router.go(-1)
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.loadingBtn = false
          this.btn = '重新评价'
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.loadingBtn = false
        this.btn = '重新评价'
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  }
}
</script>
<style scoped>
.comment{
  margin-top: 0.15rem;
  background: #fff;
  padding: 0.2rem;
  text-align: center;
}
.comment .title{
  color: #666666;
  line-height: 0.4rem;
  margin-bottom: 0.8rem;
}
.rater-title{
  margin-top: 0.25rem;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: #ff9800;
  margin-bottom: 0.4rem;
}

.comment .tag{
  margin-top: 0.5rem;
  overflow: hidden;
  margin-left: -0.1rem;
  margin-right: -0.1rem;
}
.check-item{
  margin-left: 0.11rem !important;
  margin-right: 0.11rem !important;
}
.ts{
  height: 0.9rem;
  width: 0.9rem;
  margin: 1rem auto 0.2rem;
}
.ts img{
  width: 100%;
  height: 100%;
  display: block;
}
</style>
